<template>
  <div class="tagert-item">
    <!-- 上边标题 -->
    <div class="weacher-title">
      <Title ids="#icon-renwupaihang" message="排行榜"></Title>
    </div>
    <div class="tar">
        <div>
            <ul class="uls">
                <li v-for="(item,index) in rankData" :key="index" class="liss">
                    <span class="indexs">
                        {{ index + 1}}
                    </span>
                    <span class="imgs">
                        <a href="">
                            <img :src="item.aetImg" :alt="item.artTitle">
                        </a>
                    </span>
                    <span  @click="aba" class="titles" >
                       <router-link :to="'/aab/'+item.artId">{{ item.artTitle}}</router-link>
                    </span>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
import Title from '../title/title.vue'
import axios from 'axios'
import pubsub from "pubsub-js";
export default {
    name:"Rank",
    data() {
        return {
            rankData:[] // 排行榜数据
        }
    },
    components:{
        Title
    },
    mounted(){
        //查询排行榜信息
        const that = this;
        axios.get("/aabbcc/article/selectRankArticle")
        .then(function(response){
            that.rankData = response.data.obj
        })
    },
    methods:{
        aba(){
              //发布信息
           pubsub.publish('leave');
        }
    }
}
</script>

<style scoped>
    .tagert-item {
  width: 100%;
  height: 100%;
  /* background-color: blueviolet; */
  background: #fff;
  border-radius: 10px;
}
/* 上边标题 */
.weacher-title {
  width: 100%;
  height: 47px;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}
.tagert-item .tar {
  width: 100%;
  margin: 0 auto;
  margin-top: 16px;
}
.tar ul li{
    width: 100%;
    height: 50px;
    margin-top: 10px;
    position: relative;
    transition: 0.5s;
}
.tar .uls li .indexs{
        position: absolute;
        font-style:oblique;
    top: 12px;
    font-size: 16px;
    font-weight: 600;
        left: 7px;
}
.tar .uls li:hover{
      transition: all 0.5s;
  transform: scale(1) translateY(-2px) translateZ(5px) !important;
  background: #f1f2f3;
}
.tar .uls li .imgs{
        position: absolute;
    display: inline-block;
    width: 25%;
    height: 100%;
    left: 31px;
    overflow: hidden;
    border-radius: 10px;
   
}

.tar .uls li .imgs>a>img{
    width: 100%;
    height: 85%;
    border-radius: 10px;
    object-fit: fill;
     transition: 0.5s;
}
.tar .uls li .imgs>a>img:hover{
 transform: scaleX(1.05) scaleY(1.05);
 transition: 0.5s;
}
.tar .uls li .titles{
     position: absolute;
     right: 6px;
         display: inline-block;
    width: 156px;
    height: 95%;
        margin-right: 7px;
 display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-justify: inter-ideograph;
  word-break: break-all;
}
.tar .uls li .titles>a{
    color: black;
    font-size: 13px;
    font-weight: 600;
}
.tar .uls li .titles>a:hover{
    color: #2882c5 ;
}
.uls:nth-child(1) > .liss:nth-child(1){
    color: red;
}
.uls:nth-child(1)>.liss:nth-child(2){
    color: rgb(255, 115, 0);
}
.uls:nth-child(1)>.liss:nth-child(3){
    color: rgb(255, 230, 0);
}
.uls:nth-child(1){
    color: #ccc;
}
</style>